<template>
  <div class="d_main">
  <div class="printBox">
    <rintPicking ref="print" :product-from="dataList" />
  </div>
    <test ref="test"></test>
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="newAddClick"
           v-permission="'MenuCode5-3-1-1'"
          >新建</el-button
        >
      </div>
      <div class="d_search">
      
        <el-button
          element-loading-spinner="el-icon-loading"
          icon="el-icon-printer"
          size="small"
          style="margin-right: 5px"
          @click="handlePrint"
        >
          批量打印
        </el-button>
        <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getDataLists"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getDataLists"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition"></div>
      <div class="d_set">
        <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting
            :list-data.sync="tableHead"
            :table-code="$config.lLOutStockBillList"
            @reset="getTableHead"
          />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length > 0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="dataLists"
        :height="tableHeight || 'auto'"
        @selection-change="handleSelectionChange"
        border
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <template v-for="(fruit, index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat ? 'left' : false"
          >
            <template slot-scope="scope">
              <template v-if="fruit.columnCode === 'outStockState'">
                <div class="flex">
                  <template v-if="scope.row.outStockState === 0">
                    <span class="mr5 spot" style="background: #3f61f1" /><span
                      >待确认</span
                    >
                  </template>
                  <template v-else-if="scope.row.outStockState === 1">
                    <span class="mr5 spot" style="background: #67c23a" /><span
                      >已确认</span
                    >
                  </template>
                  <template v-else>
                    <span class="mr5 spot" style="background: #e13335" /><span
                      >已拒绝</span
                    >
                  </template>
                </div>
              </template>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70px" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{
                  boundariesElement: 'opBox',
                  removeOnDestroy: true,
                }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="seeInfo(scope.row)">查看</li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer">
                  <span class="el-icon-more c_3F61F1" />
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length == 0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total || 0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getDataLists"
      />
    </div>
    <!-- 分页 E-->
    <!-- 选择领料单 -->
    <el-dialog
      v-dialogDrag
      title="选择领料单"
      :visible.sync="isPickingVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @open="openLL"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="pickingSearch.likeWords"
              prefix-icon="el-icon-search"
              placeholder="输入关键字"
              size="small"
              @keyup.enter.native="getSelectPicking"
            >
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder pt0" style="padding: 16px">
          <el-table
            v-loading="pickingLoading"
            :data="pickingList"
            height="550"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="getMaterialBillNo"
              label="领料单号"
              min-width="200"
            />
            <el-table-column
              prop="getMaterialTypeName"
              label="领料类型"
              min-width="100"
            />

            <el-table-column
              prop="xieYiShuHao"
              label="订单单号"
              min-width="150"
            />
            <el-table-column
              prop="orderProductName"
              label="产品名称"
              min-width="270"
            />
            <el-table-column
              prop="customerBillNo"
              label="客户单号"
              show-overflow-tooltip
              min-width="110"
            />
            <!-- <el-table-column
              prop="productCode"
              label="产品编码"
              show-overflow-tooltip
              min-width="110"
            /> -->

            <el-table-column
              prop="createDate"
              label="创建时间"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="getMaterialPersonName"
              label="领料人员"
              min-width="100"
            />
            <el-table-column
              prop="equipmentName"
              label="领料机台"
              min-width="90"
            />
            <el-table-column
              prop="getMaterialKindCount"
              label="领料明细"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="sumQuantity"
              label="总数量"
              show-overflow-tooltip
              min-width="120"
            />

            <el-table-column
              prop="createPersonName"
              label="创建人员"
              min-width="90"
            />
            <el-table-column
              prop="getMaterialRemark"
              label="备注"
              min-width="150"
              show-overflow-tooltip
            >
              <template scope="{row}">
                {{ row.getMaterialRemark || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="confirmSelecd(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!--  新建、编辑领料出库弹框   -->
    <el-dialog
      :title="ops === 'modify' ? '编辑领料出库' : '新建领料出库'"
      :visible.sync="isAddDialog"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"
            ><span class="mr5">出库单号：</span
            >{{ pickingForm.outStockBillNo || "系统自动生成" }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建日期：</span
            >{{ pickingForm.createTime || dayjs().format("YYYY-MM-DD") }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建人员：</span
            >{{ ops === "modify" ? pickingForm.createPersonName : name }}</span
          >
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="pickingForm"
            :model="pickingForm"
            :rules="rules"
            label-width="95px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料类型">
                  <el-input
                    v-model="pickingForm.outStockTypeName"
                    placeholder="请输入领料类型"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input
                    v-model="pickingForm.associationBillNo"
                    placeholder="关联单据"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="pickingForm.receivePersonName"
                    placeholder="请输入内容"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input
                    v-model="pickingForm.equipmentName"
                    placeholder="领料设备"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input
                    v-model="pickingForm.produceTaskBillNo"
                    placeholder="生产单号"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input
                    v-model="pickingForm.customerBillNo"
                    placeholder="客户单号"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input
                    v-model="pickingForm.productName"
                    placeholder="产品名称"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input
                    v-model="pickingForm.getMaterialRemark"
                    type="textarea"
                    :rows="1"
                    placeholder="请输入领料备注"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="出库备注"
                  class="inlineText mt5"
                  prop="outStockBillRemark"
                >
                  <el-input
                    v-model="pickingForm.outStockBillRemark"
                    type="textarea"
                    :rows="1"
                    placeholder="请输入出库备注"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">发料明细</span>
              <span
                class="pr16"
                @click="handleEditDetail"
                style="cursor: pointer"
                ><i class="el-icon-edit pr2"></i>修改发料明细</span
              >
            </div>
            <el-table
              v-loading="infoLoading"
              :data="pickingForm.detailList"
              border
              style="width: 100%"
            >
              <el-table-column
                label="物料编号"
                prop="goodsCode"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料类型"
                prop="goodsCategoryName"
                min-width="90"
              />
              <el-table-column
                label="供应商"
                prop="supplierName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料名称"
                prop="goodsName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="规格型号"
                prop="stockGoodsName"
                min-width="90"
              />
              <el-table-column
                label="库存数量"
                show-overflow-tooltip
                min-width="90"
                prop="stockQuantity"
              >
                <template slot-scope="{ row }">
                  <span style="color: #e13335">{{ row.stockQuantity }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="领料数量"
                show-overflow-tooltip
                min-width="90"
                prop="applyGetQuantity"
              />
              <el-table-column
                label="已出库数量"
                show-overflow-tooltip
                min-width="110"
                prop="outStockQuantity"
              />
              <el-table-column
                label="本次出库数量"
                show-overflow-tooltip
                min-width="120"
                prop="outStockQuantity"
              >
                <template slot-scope="{ row }">
                  <el-input
                    v-model="row.outStockQuantity"
                    @blur="outStockBlur(row)"
                    placeholder="本次出库数量"
                    size="mini"
                    clearable
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="物料单位"
                prop="goodsUnitName"
                min-width="80"
              />
              <el-table-column label="库位" prop="stockArea" min-width="150">
                <template slot-scope="{ row }">
                  <el-cascader
                    v-model="row.stockArea"
                    size="mini"
                    clearable
                    :show-all-levels="false"
                    :options="storageLocations"
                    :props="{ label: 'name', value: 'code' }"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                show-overflow-tooltip
                min-width="150"
                prop="getMaterialRemark"
              />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddDialog = false">取 消</el-button>
        <!-- 拒绝       -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="warning"
          size="mini"
          @click="refuseOut"
          >拒绝</el-button
        >
        <!-- 部分出库       -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="warning"
          size="mini"
          @click="saveAdd(2)"
          >部分出库</el-button
        >
        <!--  同意      -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveAdd(1)"
          >全部出库</el-button
        >
      </div>
    </el-dialog>
    <!--  查看领料出库弹框   -->
    <el-dialog
      title="查看领料出库"
      :visible.sync="isSeevisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"
            ><span class="mr5">出库单号：</span
            >{{ pickingForm.outStockBillNo || "系统自动生成" }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建日期：</span
            >{{ pickingForm.createTime || dayjs().format("YYYY-MM-DD") }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建人员：</span
            >{{ ops === "see" ? pickingForm.createPersonName : name }}</span
          >
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="pickingForm"
            :model="pickingForm"
            label-width="95px"
            disabled
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料类型">
                  <el-input
                    v-model="pickingForm.outStockTypeName"
                    placeholder="请输入退货备注"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input
                    v-model="pickingForm.associationBillNo"
                    placeholder="关联单据"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="pickingForm.receivePersonName"
                    placeholder="请输入内容"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input
                    v-model="pickingForm.equipmentName"
                    placeholder="领料设备"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input
                    v-model="pickingForm.produceTaskBillNo"
                    placeholder="生产单号"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input
                    v-model="pickingForm.customerBillNo"
                    placeholder="客户单号"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input
                    v-model="pickingForm.orderProductName"
                    placeholder="产品名称"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input
                    v-model="pickingForm.productVersion"
                    placeholder="生产单号"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input
                    v-model="pickingForm.getMaterialRemark"
                    type="textarea"
                    :rows="1"
                    placeholder="请输入退货备注"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="出库备注"
                  class="inlineText"
                  prop="outStockBillRemark"
                >
                  <el-input
                    v-model="pickingForm.outStockBillRemark"
                    type="textarea"
                    :rows="1"
                    placeholder="请输入退货备注"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">发料明细</span>
            </div>
            <el-table
              v-loading="infoLoading"
              :data="pickingForm.detailList"
              border
              style="width: 100%"
            >
              <el-table-column
                label="物料编号"
                prop="goodsCode"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料类型"
                prop="categoryName"
                min-width="90"
              />
              <el-table-column
                label="供应商"
                prop="supplierName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料名称"
                prop="goodsName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="规格型号"
                prop="stockGoodsName"
                min-width="90"
              />
              <el-table-column
                label="库存数量"
                show-overflow-tooltip
                min-width="90"
                prop="stockQuantity"
              />
              <el-table-column
                label="领料数量"
                show-overflow-tooltip
                min-width="120"
                prop="receiveQuantity"
              />
              <el-table-column
                label="本次出库数量"
                show-overflow-tooltip
                min-width="120"
                prop="outStockQuantity"
              />
              <el-table-column
                label="物料单位"
                prop="goodsUnitName"
                min-width="110"
              />
              <el-table-column
                label="库位"
                prop="areaShelfName"
                min-width="110"
              >
              <template slot-scope="scope">
              {{ scope.row.warehouseAreaName + scope.row.areaShelfName || '--' }}
            </template>
              </el-table-column>
              <el-table-column
                label="备注"
                show-overflow-tooltip
                min-width="150"
                prop="reviceRemark"
              />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible = false">取 消</el-button>
        <!-- 确定       -->
        <el-button type="primary" size="mini" @click="isSeevisible = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!--    拒绝原因弹框-->

    <el-dialog
      title="拒绝原因"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          :rules="cancelRules"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="stockStateDesc">
            <el-input
              v-model="cancelForm.stockStateDesc"
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible = false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="refuseInstock"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="发料单-编辑"
      :visible.sync="isDetailvisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      append-to-body
      width="85%"
    >
      <div class="dialogDody">
        <div class="addWuliaoBox">
          <div class="cTitle pl16">
            <h3>发料明细</h3>
            <div class="operations">
              <span @click="showMateria = true"
                ><i class="el-icon-circle-plus-outline"></i>添加明细</span
              >|<span @click="handleDeleteDetail" class="pr6"
                ><i class="el-icon-delete"></i>删除</span
              >
            </div>
          </div>
          <div class="tableBox mt0">
            <el-table
              v-loading="infoLoading"
              :data="detailForm.mxItemList"
              height="400"
              border
              ref="detailTable"
              style="width: 100%"
              @selection-change="handleEquipmentChange"
              :row-class-name="rowClassName"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column
                label="物料编号"
                prop="goodsCode"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料类型"
                prop="categoryName"
                min-width="90"
              />
              <el-table-column
                label="供应商"
                prop="supplierName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="物料名称"
                prop="goodsName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="规格型号"
                prop="stockGoodsName"
                min-width="90"
              />
              <el-table-column
                label="库存数量"
                show-overflow-tooltip
                min-width="90"
                prop="stockSumQuantity"
              />
              <el-table-column
                label="领料数量"
                show-overflow-tooltip
                min-width="120"
                prop="receiveQuantity"
              >
                <template slot-scope="{ row }">
                  <el-input
                    v-model="row.receiveQuantity"
                    placeholder="领料数量"
                    size="mini"
                    clearable
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="物料单位"
                prop="goodsUnitName"
                min-width="110"
              />
              <el-table-column
                label="备注"
                show-overflow-tooltip
                min-width="150"
                prop="reviceRemark"
              >
                <template slot-scope="{ row }">
                  <el-input
                    v-model="row.reviceRemark"
                    placeholder="备注"
                    size="mini"
                    clearable
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="cTitle pl16">
            <h3>修改原因</h3>
          </div>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="detailForm.modifyReason"
          >
          </el-input>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isDetailvisible = false"
          >取 消</el-button
        >
        <!-- 确定       -->
        <el-button type="primary" size="mini" @click="handleSaveDetail"
          >确认修改</el-button
        >
      </div>
    </el-dialog>
    <!--   选择物料  -->
    <SelectMateriaList
      ref="materiaList"
      :per-visible.sync="showMateria"
      @getMateriListData="refuseListsMateriAll"
    />
  </div>
</template>
<script> 
import { arraySort } from "@/utils";
import Pagination from "@/components/Pagination";
import HeadSeting from "@/components/HeadSeting";
import SelectMateriaList from "@/components/selectMaterial";
import { mapGetters } from "vuex";
import screec from "@/components/screen";
import rintPicking from "./pickingPrint.vue";

export default {
  name: "pickingOut",
  components: { Pagination, HeadSeting, SelectMateriaList,rintPicking,screec },
  computed: {
    ...mapGetters(["name", "userInfo"]),
  },
  data() {
    return {
      textarea: "",
      ops: "add", // 当前操作
      addLoading: false,
      on: true,//
      addLableLoading: false, // 拒绝按钮加载效果
      reasonVisible: false, // 拒绝领料出库弹框是否显示
      isSeevisible: false, // 查看弹框是否显示
      infoLoading: false, // 明细接口加载效果
      isAddDialog: false, // 新建，编辑领料出库弹框是否打开
      isPickingVisible: false, // 选择领料单是否显示
      searchLoading: false, // 领料出库列表加载效果
      showMateria: false, // 选择物料
      isDetailvisible: false,
      radioSelect: null, // 领料单选中单号
      currentRow: {}, // 领料单选中行
      storageLocations: [], // 库位列表
      search: {
        QueryDataBaseFiled:'',
        pageIndex: 1,
        pageSize: 30,
        outStockType: "",
        likeWords: "",
      }, // 搜索条件
      dataLists: [], // 领料出库列表
      total: 0,
      tableHeight: null,
      tableHead: [], // 表头
      pickingSearch: {
        likeWords: "",
        outStockState: 0, // 出库状态：0待出库
      },
      purLoading: false,
      pickingForm: {
        outStockType: 1, // 领料类型code
        outStockTypeName: "领料出库",
        associationBillNo: "", // 关联单据号。
        receivePerson: "", // 申请人员code
        receivePersonName: "", // 申请人员名称
        getMaterialPerson: "", // 申请人员 编码
        getMaterialRemark: "", // 领料备注
        outStockBillRemark: "", // 出库备注说明。
        createTime: "", // 创建时间
        createor: "", // 创建人员
        equipmentNo: "", // 领料设备号
        equipmentName: "", // 设备名称
        detailList: [],
      },
      checkedEquipmentData: [],
      pickingList: [], // 领料单列表
      pickingLoading: false,
      cancelForm: {
        stockStateDesc: "",
      },
      rules: {},
      cancelRules: {
        stockStateDesc: [
          { required: true, message: "请填写拒绝原因", trigger: "change" },
        ],
      },
      checkedList: [],
      dataList: [],
      detailForm: {
        getMaterialBillNo: "", //生产领料单号
        modifyReason: "",
        mxItemList: [
          {
            getMxID: 0, //领料明细主键ID，传入0就是新增的明细项
            stockGoodsCode: "", //库存物料代码
            applyGetQuantity: 0, //申请领料数量
            getMaterialRemark: "", //领料备注
          },
        ],
      },
    };
  },
  created() {
    // 领料出库表头
    this.getTableHead();
    // 库区库位
    this.getStorageLocations();
    // 得到领料单列表
    this.getSelectPicking();
  },
  mounted() {
    this.calHeight();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.multipleTable.doLayout();
    });
  },
  methods: {
    handleSelectionChange(data) {
      let leng = 0
      if(this.on){
        data.forEach((item,index) => {
          if (item.printStateName === "已打印") {
                leng++
          }else{
            leng--
          }
        });
        if(leng>0){
            this.$confirm("勾选数据存在已打印数据,是否继续打印?", "提示", {
              confirmButtonText: "继续",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
    
            }).catch(()=>{
              data.forEach((item) => {
                this.on=false
                if(item.printStateName === "已打印"){
                  this.$refs.multipleTable.toggleRowSelection(item,false)
                }
              });
            });
        }
      } 
      if(data.length===0){
        this.on=true
      }
      this.checkedList = data;


      // let flag = false
      // if(data.length > 0){
      //   data.forEach((item,index) => {
      //     if (item.printStateName === "已打印") {
      //           flag = true
      //     }
      //   });
      //   if(flag){
      //     this.$confirm("勾选数据存在已打印数据,是否继续打印?", "提示", {
      //       confirmButtonText: "继续",
      //       cancelButtonText: "取消",
      //       type: "warning",
      //     }).then(() => {
  
      //     }).catch(()=>{
      //       data.forEach((item) => {
              
      //         if(item.printStateName === "已打印"){
      //           this.$refs.multipleTable.toggleRowSelection(item,false)
      //         }
      //       });
      //     });
      //   }
      // }
      // this.checkedList = e;
    },
    openLL() {
      this.getSelectPicking();
    },
    // 拒绝出库
    refuseOut() {
      this.reasonVisible = true;
    },
    // 新建退料单同意事件
    saveAdd(type) {
      let isVer = true;
      this.pickingForm.detailList.forEach((item) => {
        if (item.stockArea.length < 1) {
          isVer = false;
          return;
        }
        item.warehouseAreaCode = item.stockArea[0];
        item.areaShelfCode = item.stockArea[1];
      });
      if (isVer) {
        const params = this.pickingForm;
        this.pickingForm.outStockType = type;
        this.addLoading = true;
        this.$api.warehouse
          .AddLLOutStockBill(params)
          .then(() => {
            this.$message({
              message: "出库成功",
              type: "success",
            });
            this.getDataLists();
            this.isAddDialog = false;
            this.addLoading = false;
          })
          .catch(() => {
            this.addLoading = false;
          });
      } else {
        this.$message({
          message: "请选择出库库位",
          type: "warning",
        });
      }
    },
    //明细多选事件
    handleEquipmentChange(value) {
      this.checkedEquipmentData = value;
    },

    // 拒绝保存事件
    refuseInstock() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true;
          const params = {
            getMaterialBillNo: this.pickingForm.associationBillNo,
            refuseReason: this.cancelForm.stockStateDesc,
          };
          this.$api.warehouse
            .RefuseGetProduceMaterialBill(params)
            .then(() => {
              this.$message({
                message: "已拒绝",
                type: "success",
              });
              this.getDataLists();
              this.isAddDialog = false;
              this.reasonVisible = false;
            })
            .catch(() => {
              this.addLableLoading = false;
            });
        }
      });
    },
    // 新建点击事件
    newAddClick() {
      this.ops = "add";
      this.isPickingVisible = true;
    },
    // 查看领料出库
    seeInfo(data) {
      this.isSeevisible = true;
      this.ops = "see";
      this.getInfo(data.outStockID);
    },

    //物料选择回调
    refuseListsMateriAll(data) {
      let arr = JSON.parse(JSON.stringify(this.detailForm.mxItemList));
      data.forEach((item) => {
        item.excuteAction = "";
      });
      arr = [...arr, ...data];
      this.detailForm.mxItemList = this.unique(arr);
      console.log(this.detailForm.mxItemList);
    },

    //数组去重
    unique(arr) {
      const res = new Map();
      return arr.filter(
        (arr) => !res.has(arr.stockGoodsCode) && res.set(arr.stockGoodsCode, 1)
      );
    },

    //删除明细
    handleDeleteDetail() {
      if (this.checkedEquipmentData.length < 1) {
        this.$message.warning("请选择要删除的明细");
        return;
      } else {
        this.checkedEquipmentData.forEach((j) => {
          console.log(j);
          //选中数据
          if (j.getMxID) {
            let index = this.detailForm.mxItemList.findIndex((e) => {
              return e.getMxID == j.getMxID;
            });
            this.detailForm.mxItemList[index].excuteAction = "delete";
          } else {
            this.detailForm.mxItemList = this.detailForm.mxItemList.filter(
              (e) => {
                return e.stockGoodsCode != j.stockGoodsCode;
              }
            );
          }
        });
      }
      let arr = JSON.parse(JSON.stringify(this.detailForm.mxItemList));
      this.detailForm.mxItemList = [];
      this.detailForm.mxItemList = arr;
      this.$nextTick(() => {
        this.$refs.detailTable.doLayout();
      });
    },

    //保存明细
    handleSaveDetail() {
      this.detailForm.mxItemList.forEach((item) => {
        item.applyGetQuantity = item.receiveQuantity;
        item.getMaterialRemark = item.reviceRemark;
        if (!item.getMxID) {
          item.excuteAction = "add";
        }
        if (item.getMxID) {
          if (item.excuteAction != "delete") {
            item.excuteAction = "update";
          }
        }
      });
      this.$api.warehouse
        .SaveGetProduceMaterialMxItems(this.detailForm)
        .then((res) => {
          this.$message.success("保存成功");
          this.isDetailvisible = false;
          this.getDetailData();
        });
    },

    handleEditDetail() {
      this.detailForm.modifyReason = "";
      this.detailForm.mxItemList = [];
      this.isDetailvisible = true;
      this.getDetailData();
    },

    getDetailData() {
      const params = {
        getMaterialID: 0,
        getMaterialBillNo: this.detailForm.getMaterialBillNo,
      };
      this.$api.warehouse.GetProduceMaterialBillDetail(params).then((res) => {
        this.pickingForm = res.baseData;
        this.pickingForm.receivePersonName = res.baseData.createPersonName;
        this.pickingForm.outStockTypeName = res.baseData.getMaterialTypeName;
        this.pickingForm.associationBillNo = res.baseData.getMaterialBillNo;
        this.pickingForm.detailList = res.mxDataList;
        this.detailForm.modifyReason = res.baseData.modifyReason;
        this.detailForm.mxItemList = res.mxDataList;
        this.detailForm.mxItemList.forEach((item) => {
          item.reviceRemark = item.getMaterialRemark;
          item.receiveQuantity = item.applyGetQuantity;
          item.categoryName = item.goodsCategoryName;
          item.stockSumQuantity = item.stockQuantity;
          item.excuteAction = "update";
        });
      });
    },

    // 确认选择领料单
    confirmSelecd(row) {
      // const arr = JSON.parse(JSON.stringify(this.currentRow.mxDataList));
      // arr.forEach((item) => {
      //   item.stockArea = [];
      //   item.stockArea.push(item.areaCode, item.areaShelfCode);
      //   item.outStockQuantity = item.applyGetQuantity;
      // });
      row.mxDataList.forEach((item) => {
        item.categoryName = item.goodsCategoryName;
        item.stockSumQuantity = item.stockQuantity;
      });
      this.detailForm.getMaterialBillNo = row.getMaterialBillNo;
      this.detailForm.mxItemList = row.mxDataList;
      this.pickingForm.detailList = row.mxDataList;
      this.pickingForm.associationBillNo = row.getMaterialBillNo;
      this.pickingForm.getMaterialPerson = row.getMaterialPerson;
      this.pickingForm.receivePerson = row.getMaterialPerson;
      this.pickingForm.equipmentNo = row.equipmentNo;
      this.pickingForm.equipmentName = row.equipmentName;
      this.pickingForm.receivePersonName = row.getMaterialPersonName;
      this.pickingForm.getMaterialRemark = row.getMaterialRemark;

      this.pickingForm.customerBillNo = row.customerBillNo;
      this.pickingForm.productName = row.productName;
      this.pickingForm.productCode = row.productCode;
      this.pickingForm.produceTaskBillNo = row.produceTaskBillNo;

      this.isPickingVisible = false;
      this.isAddDialog = true;
    },
    // 得到领料单列表
    getSelectPicking() {
      const params = this.pickingSearch;
      this.$api.warehouse
        .GetMatchProduceMaterialDataList(params)
        .then((res) => {
          this.pickingList = res;
        });
    },

    handlePrint() {
      if (this.checkedList.length < 1) {
        this.$message.warning("请选择需要打印的数据");
        return;
      }
      let ids = this.checkedList.map((x) => {
        return x.outStockBillNo;
      });
      this.$api.warehouse
        .GetProduceGetMaterialOutStockBillList({ outStockBillNoList: ids })
        .then((res) => {
          this.$api.warehouse
            .BatchUpdateScLlBillsPrintState({ outStockBillNoList: ids })
            .then(() => {
              this.getDataLists();
            });
          this.dataList = res;
          // this.$refs.print.showT = true
          // setTimeout(() => {
          //   var printHtml =
          //     document.getElementById("print-iframe-ll").innerHTML;
          //   var wind = window.open(
          //     "",
          //     "newwindow",
          //     " top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no"
          //   );
          //   wind.document.body.innerHTML = printHtml;
          //   wind.print();
          // }, 300);
          setTimeout(() => {
            this.$print(this.$refs.print, {
              onPrint: ".noPrint",
              onStart: () => {
                console.log("打印开始");
              },
              onEnd: () => {
                console.log("打印完成");
              },
            });
          }, 300);
        })
        .catch(() => {});
    },

    //本次出库数量失去焦点事件
    outStockBlur(row) {
      if (row.outStockQuantity > row.stockQuantity) {
        this.$message.warning("出库数量不能大于库存数量!");
        row.outStockQuantity = row.stockQuantity;
        return;
      }
    },

    //每一行的回调方法
    rowClassName: function ({ row }) {
      if (row.excuteAction == "delete") {
        return "showRow";
      }
    },

    // 库区库位
    getStorageLocations() {
      const parmas = {
        warehouseCode: "",
      };
      this.$api.warehouse.GetStockQueryAreaTreeView(parmas).then((res) => {
        this.storageLocations = res;
      });
    },
    // 给选中一行添加class
    tableRowClassName({ row }) {
      if (this.currentRow.getMaterialBillNo === row.getMaterialBillNo) {
        return "selectd";
      }
    },
    // 领料单详情
    getInfo(id) {
      const params = {
        queryBy: 1,
        queryValue: id,
      };
      this.infoLoading = true;
      this.$api.warehouse
        .GetSingleLLOutStockBill(params)
        .then((res) => {
          const arr = [...res.detailList];
          arr.forEach((item) => {
            const newArr = [];
            newArr.push(item.warehouseAreaCode, item.areaShelfCode);
            item.stockArea = newArr;
          });
          this.pickingForm = res;
          this.infoLoading = false;
        })
        .catch(() => {
          this.infoLoading = false;
        });
    },
    // 领料出库列表，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search;
      this.getDataLists();
    },
    // 领料出库表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.lLOutStockBillList,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableHead = res;
        // 领料出库列表
        this.getDataLists();
      });
    },
    // 领料出库列表
    getDataLists() {
      const params = this.search;
      this.searchLoading = true;
      this.$api.warehouse
        .GetMatchPageLLOutStockBills(params)
        .then((res) => {
          this.dataLists = res.list;
          this.dataLists.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
          this.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },
    // 保存表头样式变化
    saveHead(newArray) {
      const parmas = newArray;
      setTimeout(() => {
        this.$api.common.saveTableStyle(parmas).then(() => {});
      }, 300);
    },
    // 保存表头列宽度
    surverWidth(newWidth, oldWidth, column) {
      setTimeout(() => {
        const heads = [...this.tableHead];
        heads.forEach((item) => {
          if (item.columnCode === column.property) {
            item.columnWidth = column.width;
            return;
          }
        });
        this.saveHead(heads);
      }, 100);
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect();
        this.tableHeight = rect.height;
      });
    },
    closeDialog() {
      if (this.$refs.pickingForm) {
        this.$refs.pickingForm.resetFields();
      }
      this.pickingForm = this.$options.data().pickingForm;
    },
    closeCancelDialog() {
      if (this.$refs.cancelForm) {
        this.$refs.cancelForm.resetFields();
      }
      this.cancelForm = this.$options.data().cancelForm;
    },
  },
};
</script>
<style lang="scss" scoped>
.operations {
  display: flex;
  align-items: center;
}
.operations i {
  padding-right: 5px;
}

.operations > span:first-child {
  padding-right: 5px;
}

.operations > span {
  font-weight: 400;
  color: #000;
  cursor: pointer;
}

.operations > span:last-child {
  padding-left: 5px;
}
.d_search {
  display: flex;
}
.print-content {
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 9999;
}

.spot {
  width: 6px;
  height: 6px;
  display: inline-block;

  border-radius: 100%;
}
.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}
::v-deep .showRow {
  display: none;
}
</style>
<style lang="scss">
.selectd {
  td {
    background: #3f61f110;
  }
}
</style>
</style>
